<template>
  <div class="friends_page">
    <CommonHeader title="邀请好友加入" />
    <div class="friends_content page_no_tab_bar">
      <div class="friends_img">
        <img src="@/assets/profile/friends_img.png" alt="" />
        <span class="join_us">扫描二维码加入我们</span>
      </div>
      <!-- 邀请码 -->
      <div class="input_box">
        <div class="input_label">邀请连接</div>
        <div class="input input_copy">
          <input type="text" v-model="ruleForm.inviteLink" disabled />
          <div class="is_copy" @click="copyContent(ruleForm.inviteLink)">
            <img src="@/assets/profile/copy_icon.png" alt="" />
          </div>
        </div>
        <div class="input_rule"></div>
      </div>
      <!-- 邀请链接 -->
      <div class="input_box">
        <div class="input_label">邀请码</div>
        <div class="input input_copy">
          <input type="text" v-model="ruleForm.inviteCode" disabled />
          <div class="is_copy" @click="copyContent(ruleForm.inviteCode)">
            <img src="@/assets/profile/copy_icon.png" alt="" />
          </div>
        </div>
        <div class="input_rule"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import CommonHeader from "@/components/CommonHeader.vue";
import { ElMessage } from "element-plus";

// 邀请表单信息
const ruleForm = ref({
  inviteLink: "https://arong.55",
  inviteCode: "XIAODAIHUO-WOBUSHIAIKUN",
});

// 复制输入框内容
const copyContent = async (text: string) => {
  try {
    await navigator.clipboard.writeText(text);
    ElMessage.success("复制成功！");
  } catch (err) {
    ElMessage.error("复制失败！");
  }
};
</script>

<style lang="scss" scoped>
.friends_page {
  .friends_content {
    padding-top: 10px;
    .friends_img {
      padding-top: 50px;
      padding-bottom: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .join_us {
        margin-top: 20px;
        margin-bottom: 50px;
      }
    }
    .input_box {
      // height: 108px;
      margin-bottom: 20px;
      .input_label {
        margin-bottom: 10px;
      }
      .input {
        width: 100%;
        height: 50px;
        background-color: #141515;
        margin: 5px 0;
        input {
          width: 100%;
          height: 100%;
          font-size: 18px;
          padding: 0 5px;
          background-color: #141515;
          color: #babcbf;
        }
      }
      .input_copy {
        display: flex;
        align-items: center;
        input {
          flex: 1;
        }
        .is_copy {
          display: flex;
          align-items: center;
          padding: 0px 10px;
        }
      }
    }
  }
}
</style>
